<template>
  <el-dialog title="资质证件" v-model="visible" width="600px" :close-on-click-modal="false" :close-on-press-escape="false">
    <ul class="qualication">
      <li v-for="info in qualiData.info" :key="info.customerQualificationId">
        <el-image class="img" :src="info.qualificationImg" :preview-src-list="[info.qualificationImg]"> </el-image>
        <p>{{ consts.CustomerQualificationType.find((e) => e.qualificationType === info.qualificationType)?.title }}</p>
        <p v-if="info.effectiveDate">{{ info.effectiveDate }} - {{ info.expiredDate }}</p>
      </li>
    </ul>
  </el-dialog>
</template>

<script setup>
import { reactive, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'
import api from '@/api'
import consts from '@/consts'

const emit = defineEmits(['update:visible', 'change'])
const props = defineProps(['visible', 'customerId'])

const visible = computed({
  get: () => {
    return props.visible
  },
  set: (value) => emit('update:visible', value)
})

watch(
  () => props.customerId,
  (val) => {
    if (val) {
      loadData()
    }
  }
)

const qualiData = reactive({
  info: []
})

const loadData = async () => {
  let { data, err } = await api.get(`/medinstrument/third/order/getCustomerQualification?customerId=${props.customerId}`)
  if (err) {
    ElMessage.error(err)
  } else {
    qualiData.info = data.customerQualificationList
  }
}
</script>

<style scoped lang="scss">
.qualication {
  display: flex;

  li {
    color: var(--color-text);
    text-align: center;
    margin-right: 20px;

    &:last-child {
      margin-right: 0;
    }

    .img {
      width: 100px;
      height: 100px;
      vertical-align: top;
    }

    p {
      margin-top: 10px;
    }
  }
}
</style>
